Skip to content

1.md

Latest commit

 

History

History
192 lines (117 loc) · 4.57 KB

1.md

File metadata and controls

192 lines (117 loc) · 4.57 KB

Lesson 1

the actual first lesson - JSX

workbook 1 - ulpan

Agenda:

  • concepts: React Component, render, state, es6 destructuring
  • step 1: read through the App Component (learning JSX)
  • step 2: exercises in HTML (JSX) and CSS

git cheat sheet

git cheat sheet

$ cd ~/code/react-course
$ git clone https://github.com/nikfrank/react-course-workbook-1
$ cd react-course-workbook-1
$ yarn
$ npm start

concepts

This is a silly little exercise to get us comfortable with React.Component's render function, and the JSX syntax they invented for it.

core concepts:

state

this.state is where we put all the variables we want scoped to our component

we declare an initial state like

class App extends Component {
  state = { someWord: 'balaganoosh' }

  //...
}

can read it out like

class App extends Component {
  state = { someWord: 'balaganoosh' }

  render(){
    const { someWord } = this.state;

    return (
      <div>{someWord}</div>
    );
  }
}

(without destructuring we could've said const someWord = this.state.someWord;)

React only wants us to make changes to state using his this.setState function, which we used in workbook 0 and will talk about later; the important thing to know here is that any variables in our component that we ever want to change we should put into state.

render

render is where we generate our JSX (fancy javascriptish HTML) when react is updating the view.

All we're doing in this example is reading a value from this.state, then rendering it into a div. The curlies inside the <div>{someWord}</div> are called 'breakouts' - they allow us to break out of the HTML syntax and run any javascript. Whatever the expression in the breakout evaluates to will be rendered in place (here the string 'balaganoosh').

ok, the actual lesson:

step 1: read through the App Component

here in our initial state, we have a list of Hebrew phrases I don't understand which we want to display to the user.

//...
state = {
    words: [
      {
        he: 'mastomeret',
        en: 'I\'m stalling for time in a sentence',
        confidence: 0.6,
      },
  //...

for the user to see these words, we'll have read the words out of this.state

In the render function, first off we're returning a div called 'App'

<div className='App'>
  ...
</div>

(note that we use className= where HTML uses class=, because class is a keyword in JS!)

with (within) create-react-app's default header

<header className='App-header'>
  <img src={logo} className='App-logo' alt='logo' />
  <h1 className='App-title'>Welcome to React</h1>
</header>

and a div called 'list-of-words' who has a breakout

the breakout maps each word to a JSX tag

withe word as its content

<div className='list-of-words'>
  {
    words.map(word => (
      <p key={word.he}> {word.he} -- {word.en} </p>
    ) )
  }
</div>

this is the standard way to do a loop in React.

words.map returns a new array with our p tags, so react will end up with

<div className='list-of-words'>
  <p> some word -- מילה ראשון </p>
  <p> the next one -- האחר </p>
  <p> etc. -- וכך אלה</p>
</div>

which is how we end up with a list of words in our page!

CSS

notice that the property className is what is linking us to our css (./src/App.css)

other than that, the CSS class usage is the same

this is a great article about all the ways to CSS in react

later we'll cover React's style prop, where we can use CSS-in-JSON

step 2: exercises in HTML (JSX) and CSS

We aren't going to change anything about the map just yet, just work withe JSX and CSS

exercises:

  1. replace the <div> with a <ul> and the <p>s with <li>s. Style it up a bit
  2. replace everything with <div>s and style using flex-box
  3. put an x button on each item and remove that item onClick (if you can do this already, you're sandbagging!)

solutions available on branches

  • ul-soln
  • flex-soln
  • span-soln

with mostly css

back to index

next lesson