React Home
What is ReactJS?
ReactJS is a JavaScript library used to build User Interfaces(UI). It significantly decreases the code with it's
components, states i.e. hooks, etc.
Creating react app
Open your terminal in the directory you would like to create your application. Run this command to create a React
application named my-react-app:
npx create-react-app my-react-app
OR, you can directly make your application without specifying a name, like this:
npx create-react-app .
In this case, all files will be kept in the current directory.
Note: When choosing folder name, make sure there are no spaces or capital letters because of npm naming
restrictions.
Once base application is created, if folder specified you just have to enter the folder. You can use this command to
enter:
cd directory-name
Then just start up the application with this command:
npm start
and you are good to go!
Hello World
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
In this we are just putting <h1> tag in a div with id 'root'. That's it! In div with id 'root' everything will be rendered.
We can also change it from 'root' to something else, as we are just getting an element and putting HTML in it.
React Setup
Node.js
You can download it from: https://nodejs.org/en/
Creating our first react app
Open your terminal in the directory you would like to create your application. Run this command to create a React
application named my-react-app:
npx create-react-app my-react-app
Copy
OR, you can directly make your application without specifying a name, like this:
npx create-react-app .
Copy
In this case, all files will be kept in the current directory.
Note: When choosing folder name, make sure there are no spaces or capital letters because of npm naming
restrictions.
Once base application is created, if folder specified you just have to enter the folder. You can use this command to
enter:
cd directory-name
Copy
Then just start up the application with this command:
npm start
Copy
and you are good to go!
