Learn React.js In One Hour

React is a JavaScript library for building user interfaces. Developer can build user interfaces easily with react. I think every JavaScript Developer should learn React. It’s can help to make UI more gorgeous and functional. In this article, I will explain the basic concept of React. If you want to learn react. First of all, you should explore the basic concept of React. And this article is perfect for beginners who can achieve a great idea of React js. Follow this article and keep practicing.

Create Your First React App

Make sure you have a development environment and installed Node on your machine to create a new project.

Run this code below on your Command-line: Run this code step by step.

npx create-react-app your-app-name
cd your-app-name
npm start

After run npm start Command-line, you will see a new tab will be open your machine default browser in http://localhost:3000/

When you will see this page on your web browser. Now you can sure that React is running on your web browser.

Now you can open your app folder on the text editor. In this article, I will use VS code text editor. If you open your app folder in vs code you will see this kind of file and folder.

Go to the index.js file into the src folder.

Just look insde the RectDOM.render. There is

ReactDOM.render(<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘root’) );

Look carefully there are two things one is before the comma “ , ” and another is after the comma. Now I am going to clarify for you what are these two things.

Before the comma: what you and to show on your web browser.

<React.StrictMode>
<App />
</React.StrictMode>

After the comma: Where you want to show on your web browser.

document.getElementById(‘root’)

If we want to print Hello React on your web browser. just code below:

Note: After the comma react can render one element or as a parent element. All app elements will be as a children element for the first element in index.js file.

Components

Now I will explain how to add new components. Previously we removed App.js file in Index.js file. So, now we add App.js file as a component. Remember Every component file name start will be a capital letter. And if we apply any function or else it has to write inside the main function like App and before the return. Also if we want to apply anything in react function inside the element. we have to use always curly braces{}

First I add import file: import App from ‘./App’;

After that add an imported component into the render file Before the comma: <App></App>

Let's move on to the App.js file: Clear everything and write code below: \

Also, it’s a React Function Syntex:

Whatever we will right inside the div tag. it will show your web browser.

See Example:

Look at one thing whatever we write inside the one element or tag.

How to Style in React js: You can style in react in many ways but I will explain only two ways.

1. Inline Style
2. External file

Inline CSS style In React

Type: style={{your style here}}

Example:

CSS External File in React

External file code will be exactly as normal CSS style. Normally in HTML, when we apply the style in the element in that time we write |class=“ ” |. But, In React we have to write |className=“ ”|. And external CSS file have to import into react file.

Example:

Using useState Hook

Syntex:
const [state, setState] = useState(initial Value);

useState is a very wonderfull hook in react. initial value is a default value for “state” and “setState ” we will set whatever we want. Before using useState. must have to import .

import {useState} from “react”

See Exampe:

Conditional rendering Data

the conditional rendering depends on some conditional logic. It’s often needed to render one part of the markup if some conditions are met, and the other if they are not. In React there are a few ways to do that.

Ternary operator:

{
   Condition? 'true answe will execute' : 'false answe will execute'
}

Props Pass one component to another component

Create a new component and import the App.js component. I am going to create a Example name component. and pass an object as a prop inside the Example tag.

Example:

Now get person data as a props in Example file:

Now we will build a simple Counter Project with the help of useState

it’s a very simple project. Inside the h1 tag, I declare count into curly braces, and inside the button, I use an arrow function, and inside this function, I use setCount Function form useState. When the user click this button number will increase one.

React Project Production

If you want to host your project or website for production on the hosing site. run this code in your command line:

npm run build

After completing the command you will see a folder on your root directory. just copy this folder and upload your hosting site.

You don’t need

Probably the most common misconception among React newcomers is that you need to use it with Redux or some other Flux implementation. Redux is great, lots of features, and a clean, functional, testable approach. But you might not need it.

This Article was the basic concept of react development. From this article, your react journey starts. Keep Learning, Keep practicing.