React Basic

First step to react.

What is react? , NPM, Package.json , JSX, create a new react app, function components, redux,

React Basic Guide

• React Functional Component
• React Inline Style
• React Router
• Redux
• Form Input
• HTTP Requests

What is React?

React is javascript library created by facebook for user Interfaces(UI). With react we can create web applicaton. React can change data without reloading the page.

Before you learn , you should have known

• HTML
• CSS
• JavaScript (ES6)
• NodeJS

Simple React Code Example

ReactDom.render(
<h1>Hello World!</h1>,
document.getElementById("root")
);

The code looks like mixing of javascript and html code.

Before you started

you might have latest Node version and npm.

you can check in your terminal like this: (I use hyper terminal)

node --version 
npm --version

Knowledge about

• NPM > node package manager. It is use to install package for javascript. Now, we will use npm to install React packages like (react, react-dom, …).
• Package JSON > when we initialized npm to our project, we will get package.json file in our project. It will show all the packages that you install with npm in version.

Sample package.json file

{
"name": "react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
},...
}

• JSX > JSX stands for JavaScript XML. The mixing of HTML and JS become JSX (react code).

ReactDom.render(
<h1>Hello World!</h1>,
document.getElementById("root")
);

Let’s Get Started with React

• create react app

npx create-react-app react-app

add above code to your terminal. create react app is the easiest way to start a new react app. This command create a react app called react-app. You can give whatever you like “npx create-react-app my-app”.

cd react-app

change directory(cd) to you react-app that you create(cd react-app) and the command (ls) to show all the files, folder inside.

ls

you will see like this

$ ls
node_modules/  package.json  public/  README.md  src/  yarn.lock

run the app with the command

npm start