Getting Started With React
In this post we are going how to start with programming in React and what should be installed and how we should install and build an React app.
How to Install React?
we need the following programs are installed.
- Installing Node.JS and npm
we need to have Node.js and npm installed on our system in my case (Windows)
download Node.ja from https://nodejs.org/en/download/ and start installation with the file: node-v16.18.0-x64 (latest version) and then check that node.js and npm are installed by starting command line
C:\Users\default1>node -v v16.18.0
and check npm is installed:
C:\Users\default1>npm -v 8.19.2
If you have older version of npm upgrade it by command:
npm update -g2. Install React with create-react-app <project-directory> .
C:\Users\default1>create-react-app C:\Utvecklingprogram\React\myfirstproject
Now I have give a directory: C:\Utvecklingprogram\React\myfirstproject as a parameter, React is installed and created a project in the directory: myfirstproject. with following files:
.git, node-modules, public,src, .gitignore, package, package-lock, ReadMe.
create-react-app is the best way to start building a new single-page application in React.
Creating a React Application
The first step is to start your terminal/command prompt, navigate to the folder where you want to save your React application, and then execute this command:
npx create-react-app my-appThis command is the same as create-react-app <project-directory> and exactly creates the same structure and app for you.
Note: my-app is the name of the application we are creating, but you can change it to any name of your choice.
I give myfirstapp as app name as following:
C:\Utvecklingprogram\React>npx create-react-app myfirstapp
The installation process may take a few minutes. After it is done, you should see a folder that appears in your workspace with the name you gave your app. Congratulations!
After installation you can see the following:
Success! Created myapplication at C:\Utvecklingprogram\React\myfirstapp Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd myfirstapp npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd myapplication npm start Happy hacking!
The above output gives the command to run and test the app.
To Run React Application
Now, head back to the terminal, and the first thing you need to do is navigate to the directory where the app was installed using cd my-app. Then finally run npm start to see your app live on localhost:3000.
You should see something like this:
Structure of directory in React App.
We’ve just finished the first part of this article. Now let’s figure out what each file and folder in our React application means and does. This is critical either as a beginner or an experienced React developer.
The directory structure of your newly created React app looks like this when you open it:
Let’s now start by explaining these folders and what they stand for:
node_modules directory
The node_modules folder contains all of our dependencies, and this folder is ignored when we set up source control. But it is important to note that the package.json file works in tandem with the node_modules folder because it contains information about all of the dependencies as well as some script commands.
If you delete the node_modules folder, the application will break because you’ll no longer have your dependencies.
To re-install these dependencies, you can use npm install – this will check the pakage.json file for a list of the dependencies and then install all of them. This will make it easy for you to push your code online or share your code with others without having to share the heavy node_modules folder.
Note: This is not just for create-react-app.
public directory
Although the majority of the work will be done in the src folder, the public folder contains some static files, such as the HTML file. You could, for example, change the title of your web app, add CDNs such as Google Fonts, and so on.
Note: Don’t be afraid of this file because it’s just a regular HTML file. The only code to remember is the div with the id root where the entire React application will be placed.
<div id="root"></div>.gitignore file
Just as the name suggests, it’s a file that specifies which files and folders will be ignored by our source control.
When you open the file, you will see a list of files that are being ignored, including the node_modules and build folder. You can decide to add some particular files or folders.
build directory
The build folder is another folder that you can’t see right now, but that you’ll see when you build your project.
This will create a production-ready folder of static assets that can be hosted or deployed using a drag-and-drop option on a platform like Netlify.
src directory
So far, we’ve covered some fundamental folders, but our main concern is the src folder, which is where development takes place. Here’s what the src folder looks like:
Let’s start with the fundamental files: App.js, index.js, index.css, and App.css (you can delete every other file for now).
App.js
This is where all of your components will eventually meet. The name of the file isn’t important, but it’s good practice to keep this name so that other developers can understand your code.
index.js
This is the starting point for your application. More specifically, this is where you target the root id from the index.html file and render the App.js file, which is where your entire file (components and pages) will meet.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
index.css and App.css
These both contain styles for your application. The index.css file contains global styling and the App.css file almost works the same as it does for the App.js file – but whether we use a CSS file is entirely up to us. While getting started, we can choose to delete one and use only one CSS file.
Understanding JSX
JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.
Writing code in React takes a long time because you have to use the React.createElement function every time, even if you are just adding a simple div.
The image above depicts the exact same code written in JSX and with React.createElement. You can tell which is easier to write, understand, and manage by comparing the two.
create-react-app internally uses Babel for the JSX to JavaScript conversion, so you don’t have to worry about configuring your own babel configuration with Webpack.
What to do and what don’t do in JSX
Make sure you’re aware of some of these important details so that some bugs don’t get in your way:
- Your markup is usually placed after the return statement, either as a single line of code or as a block code.
- All of your code should be wrapped in a single tag. This could be a
div, a tag with no content (<>), or any other tag.
const App = () => {
return ( <h1>JSX Title</h1>
<p>This is first JSX Element!</p>
<p>This is another JSX Element</p>
);
};This works fine with normal markup but would result in a major error because React requires adjacent elements to be wrapped in a parent tag. This simply means that for this code to run, it must be wrapped in a parent tag, such as a div, section, article, and so on.
const App = () => {
return ( <div>
<h1>JSX Title</h1>
<p>This is first JSX Element!</p>
<p>This is another JSX Element</p>
</div> );
};You can also make use of the React.Fragment component.
Adding Comments in JSX Code
As a developer, it’s now standard practice to always add comments to your code, and JSX is no exception. You can either use the shortcut command (Cmd + / (Mac) or Ctrl + / shortcut keys to either add or remove a particular comment).
Note: We can pretty much do anything with JSX. You can read this article to learn more about how JSX works.
In summary, JSX just provides syntactic sugar for the React.createElement (component, props, ...children) function.
Conclusion
In this post, I have explained, how to install React and how to create your first react appm Start, and test the app, etc. You’ve also learned what each of the files in apps directory structure does.
In my next post shall discuss about Creating ASP.net Core app with React
This post is part of “React-Step by step”.