Code Monkey home page Code Monkey logo

reactjs-l's Introduction

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.


Learn Reactjs

Components

/src

index.js

style.scss

/components

  • /Header
  • /Main
  • /MainContent
  • /Card
  • /CardContent
  • /CardDetail
  • /CardRelated
  • /Login
  • /Footer

/router

  • /Directional

/data

  • card-data.json
  • main-data.json

Giải quyết vấn đề

Các khái niệm cơ bản của Reactjs

Dùng JSX cho toàn bộ dự án

Khi xác định được đường dẫn tĩnh, sử dụng (%PUBLIC_URL%)

Các value mặc định có hỗ trợ (defaultValue)

Sử dụng (ref) để lưu trữ giá trị

Điều hướng cho trang web bằng Router

Nhận biết khi ở trang nào, sẽ sử dụng activeClassName

Tạo đường dẫn bằng cách thêm tham số từ props

Sử dụng tham số từ URL

Xử lý form dưới dạng text-pass-checker-select-file

  • Đưa dữ liệu từ form sang state dưới dạng array

Bài học

Khái niệm components

Khái niệm props

  • Các props màu tím

Khái niệm states

  • Trạng thái stats có trong folder (Main)

    • Thay đổi state với onClick=''

Sử dụng map(callBack) để chạy vòng lặp

Sử dụng (JSX) cho toàn bộ dự án

  • <file_name>.jsx

Sử dụng (%PUBLIC_URL%) cho đừng dẫn tĩnh

  • /public/index.html

    • <link href="%PUBLIC_URL%/<file...>" />
      

Sử dụng (defaultValue) trong

  • defaultValue={this.props.children}

LifeCycle trong Reactjs

Sử dụng (ref) trong Reactjs

  • ref={callBack}

Reactjs Router (Điều hướng)

Sử dụng activeClassName

Tạo, import .json

  • Sử dụng map() để duyệt dữ liệu

Tạo đường dẫn chuẩn SEO

  • props.

Tham số từ URL parameter

  • match>param>

    • /:slug.:id

Xử lý form

  • Router Redirect

    • event.preventDefault()
    • import in Router-dom
  • Lấy dữ liệu từ Form lưu trữ dưới dạng Array

    • ReactJS (Handing Mutiple Inputs)

      • this.setState({ [name] : value })

Xử lý form Select

  • Đặt giá trị mặc định bên trong state

Xử lý upload file

  • Lấy thông tin từ mục input file

package.json

dependencies

  • react
  • react-dom
  • react-router-dom
  • react-scripts
  • node-sass
  • vietnamese-slug

devDependencies

  • eslint-plugin-react

Xử lý Error

Sử dụng map() bên trong có chứa if-else

  • Expected to return a value at the end of arrow function array-callback-return

    • if() {} return true;

Nên return về 1 cái gì đó

Tạo state tương ứng với input_name

event.target.files


img

reactjs-l's People

Watchers

Trần Đức Lĩnh avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.