React Basic

First step to react.

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

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

--

--

--

Learning javascript and web-development

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using BehaviorSubject for Angular Global State

My way of structuring a Node JS App

Developing for TVs with React-TV

Overlay file upload progress card on Angular 9

To Go or Node to Go?

Remove Duplicates from Sorted Array

React Native & Stetho

Stetho is a sophisticated debug bridge for Android applications.

My beginner experience with React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cho Zin Thet

Cho Zin Thet

Learning javascript and web-development

More from Medium

Introduction to React JS

React JS for Beginners :)

React Hook Basics