You should use [Jests `--watchAll=false` flag](https://jestjs.io/docs/en/cli#--watchall).

eg: 

`npm test -- --watchAll=false`

**Note:** this is for [react-scripts &gt; 3.00][1]

*For older versions:*

* react-scripts `&gt;= 2.1.4 &lt; 3.00`

 For non-ci, eg running tests locally, you can pass a `--no-watch` flag:

 `npm test --no-watch`

* react-scripts `&lt;= 2.1.3`

 CRA looks for a `CI` environment variable, if its present it doesn&#39;t run in watch mode. 

 `CI=true npm test` should do what you are looking for

See the [User Guide -&gt; Running Tests -&gt; On your own environment](https://facebook.github.io/create-react-app/docs/running-tests#on-your-own-environment)


  [1]: https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#remove---no-watch-flag

In your `package.json` scripts:

`&quot;test&quot;: &quot;react-scripts test --watchAll=false&quot;`

Or `npm test -- --watchAll=false`

Or `yarn test --watchAll=false`

Note: the flag used to be called `--no-watch` in `react-scripts &lt; 3.0`: https://github.com/facebook/create-react-app/blob/3.x/CHANGELOG.md#remove---no-watch-flag

non-interactive solution:

    npm test a --watchAll=false
or 

    yarn test a --watchAll=false




I have this simple program:

    #include &lt;stdio.h&gt;

    struct S
    {
        int i;
    };

    void swap(struct S *a, struct S *b)
    {
        struct S temp;
        temp = *a    /* Oops, missing a semicolon here... */
        *a = *b;
        *b = temp;
    }

    int main(void)
    {
        struct S a = { 1 };
        struct S b = { 2 };

        swap(&amp;a, &amp;b);
    }

As seen [on e.g. ideone.com](http://ideone.com/jaNv9B) this gives an error:

&gt;     prog.c: In function &#39;swap&#39;:
&gt;     prog.c:12:5: error: invalid operands to binary * (have &#39;struct S&#39; and &#39;struct S *&#39;)
&gt;          *a = *b;
&gt;          ^

Why doesn&#39;t the compiler detect the missing semicolon?

---

Note: This question and its answer is motivated by [this question](https://stackoverflow.com/q/40134786). While there are [other questions](https://stackoverflow.com/q/7071168) similar to this, I didn&#39;t find anything mentioning the free-form capacity of the C language which is what is causing this and related errors.

Why doesn&#39;t the compiler report a missing semicolon?

I am trying to run a docker example [following this documentation](https://docs.docker.com/docker-for-mac/) 

This is my command: 

    docker run -d -p 80:80 --name webserver nginx

But I get this error: 

&gt; docker: Error response from daemon: driver failed programming external connectivity on endpoint webserver (bd57efb73c738e3b271db180ffbee0a56cae86c8193242fbc02ea805101df21e): Error starting userland proxy: Bind for 0.0.0.0:80: unexpected error (Failure EADDRINUSE).

How do I fix this?

docker: driver failed programming external connectivity on endpoint webserver

**Update: my use case is mainly to run tests at CI, but overriding default CRA Jest parameters is something I&#39;m generally wondering about.**

---

I&#39;m running tests using the [Jest](https://facebook.github.io/jest/), config that came with [Create React App](https://github.com/facebookincubator/create-react-app). It always launches into the interactive mode:

     › Press a to run all tests.
     › Press o to only run tests related to changed files.
     › Press p to filter by a filename regex pattern.
     › Press q to quit watch mode.
     › Press Enter to trigger a test run.

But I don&#39;t want it to wait for my input. I want it to run once and then terminate. I tried using the `--bail` or `--no-watchman` switches but it still launches in interactive mode.

If I globally install `jest`, and run it in the root of my project, it executes once and finish (just as I want). But when I run `npm test` which runs `react-scripts test`, it goes into the watch mode even when I&#39;m not passing `--watch`.

Update: I&#39;ve also filed an issue on [CRA](https://github.com/facebookincubator/create-react-app/issues/784).


Running CRA Jest in non-interactive mode

Update: my use case is mainly to run tests at CI, but overriding default CRA Jest parameters is something I'm generally wondering about.
<hr>
I'm running tests using the <a href="https://facebook.github.io/jest/" target="_blank" rel="noopener noreferrer">Jest</a>, config that came with <a href="https://github.com/facebookincubator/create-react-app" target="_blank" rel="noopener noreferrer">Create React App</a>. It always launches into the interactive mode:
<pre><code class="hljs language-css"> › Press a to run all tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
</code></pre>
But I don't want it to wait for my input. I want it to run once and then terminate. I tried using the <code>--bail</code> or <code>--no-watchman</code> switches but it still launches in interactive mode.
If I globally install <code>jest</code>, and run it in the root of my project, it executes once and finish (just as I want). But when I run <code>npm test</code> which runs <code>react-scripts test</code>, it goes into the watch mode even when I'm not passing <code>--watch</code>.
Update: I've also filed an issue on <a href="https://github.com/facebookincubator/create-react-app/issues/784" target="_blank" rel="noopener noreferrer">CRA</a>.

I am creating an social login page with an Access Management (AM) server.
When user click on the login button then I make a fetch http post call to AM server. AM server generates a HTTP 301 redirect response with auth cookies to the social login page. I need to follow somehow this redirect response and show the new content in the web browser.

UI: ReactJS

Request:

    POST /api/auth/socialauth/initiate HTTP/1.1
    Host	example.com
    User-Agent	Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:49.0)
    Accept	*/*
    Accept-Language	en-US,en;q=0.5
    Accept-Encoding	gzip, deflate
    origin	http://web.example.com:8080
    Referer	http://web.example.com:8080/myapp/login
    Cookie	authId=...; NTID=...

Response

    HTTP/1.1 307 Temporary Redirect
    https://www.facebook.com/dialog/oauth?client_id=...&amp;scope=public_profile%2Cemail&amp;redirect_uri=http%3A%2F%2Fam.example.com%3A8083%2Fopenam%2Foauth2c%2FOAuthProxy.jsp&amp;response_type=code&amp;state=qtrwtidnwdpbft4ctj2e9mv3mjkifqo


React code:

    initiateSocialLogin() {
        var url = &quot;/api/auth/socialauth/initiate&quot;;
    
        fetch(url, { method: &#39;POST&#39; })
            .then(response =&gt; {
                // HTTP 301 response
                // HOW CAN I FOLLOW THE HTTP REDIRECT RESPONSE?
            })
            .catch(function(err) {
                console.info(err + &quot; url: &quot; + url);
            });
    }


How I can follow the redirect response and show the new content in the web browser?

redirect after a fetch post call

Here&#39;s what I tried and how it goes wrong.

This works:

    &lt;div dangerouslySetInnerHTML={{ __html: &quot;&lt;h1&gt;Hi there!&lt;/h1&gt;&quot; }} /&gt;

This doesn&#39;t:

    &lt;div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /&gt;

---

The description property is just a normal string of HTML content. However it&#39;s rendered as a string, not as HTML for some reason.

[![enter image description here][1]][1]

Any suggestions?


  [1]: http://i.stack.imgur.com/cI25q.png

Render HTML string as real HTML in a React component

I have a usecase where i need to unmount my react component. But in some cases, the particular react component is unmounted by a different function.
Hence, I need to check if the component is mounted before unmounting it.

Is there a way to check if the react component is unmounted?

I am following the tutorial on the official React Native website.

Using the following to build my project:

    react-native run-ios

I get the error:

    Found Xcode project TestProject.xcodeproj
    xcrun: error: unable to find utility &quot;instruments&quot;, not a developer   
    tool or in PATH

    Command failed: xcrun instruments -s
    xcrun: error: unable to find utility &quot;instruments&quot;, not a developer 
    tool or in PATH

Although, when I run the app from the .xcodeproj, everything works fine.

Any suggestions?

Error Running React Native App From Terminal (iOS)

I&#39;m currently using CSS Modules with React for my styling. So each of my components is importing in it&#39;s component specific css file, like so:

    import React from &#39;react&#39;;
    import styles from &#39;./App.css&#39;;
    
    const example = () =&gt; (
      &lt;div className={styles.content}&gt;
        Hello World!
      &lt;/div&gt;
    );
    
    export default example;

This works fine when styling individual components, but how do I apply global styling (html, body, header tags, divs, etc.) that isn&#39;t component specific? 



How to apply global styles with CSS modules in a react app?

I have used [Redux-Saga](https://github.com/yelouafi/redux-saga). Code written with it is easy to reason so far, except JS generator function is messing up my head from time to time. From my understanding, [Redux-Observable](https://github.com/redux-observable/redux-observable) can achieve the similar job that handles side effects but without using generator function. 

However, docs from Redux-Observable does not provide many opinions of why it is superior against Redux-Saga. I would want to know whether not using generator function is the only benefit of using Redux-Observable. And what could be the downsides, gotcha or compromises from using Redux-Observable instead of Redux-Saga? 



Why use Redux-Observable over Redux-Saga?

I&#39;m probably missing something very obvious and would like to clear myself. 

Here&#39;s my understanding.  
In a naive react component, we have `states` &amp; `props`. Updating `state` with `setState` re-renders the entire component. `props` are mostly read only and updating them doesn&#39;t make sense. 

In a react component that subscribes to a redux store, via something like `store.subscribe(render)`, it obviously re-renders for every time store is updated. 

[react-redux](http://google.com) has a helper `connect()` that injects part of the state tree (that is of interest to the component) and actionCreators as `props` to the component, usually via something like 

&lt;!-- language: lang-js --&gt;

    const TodoListComponent = connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoList)

But with the understanding that a `setState` is essential for the `TodoListComponent` to react to redux state tree change(re-render), I can&#39;t find any `state` or `setState` related code in the `TodoList` component file. It reads something like this:

&lt;!-- language: lang-js --&gt;

    const TodoList = ({ todos, onTodoClick }) =&gt; (
      &lt;ul&gt;
        {todos.map(todo =&gt;
          &lt;Todo
            key={todo.id}
            {...todo}
            onClick={() =&gt; onTodoClick(todo.id)}
          /&gt;
        )}
      &lt;/ul&gt;
    )

Can someone point me in the right direction as to what I am missing?

P.S I&#39;m following the todo list example bundled with the [redux package][1].


  [1]: https://github.com/reactjs/redux/tree/master/examples/todos/src/containers

How does a redux connected component know when to re-render?

I am looking the [redux todomvc codes][1]. What is the `static` keyword in `static propTypes`?
Thanks

**UPDATE**

No idea why downvoted? Is this post too simple? Comments are welcomed. Thanks. I hope I can delete this post.


  [1]: https://github.com/reactjs/redux/blob/85e2368ea9ff9b308fc873921ddf41929638f130/examples/todomvc/src/components/Header.js#L5

react: why static propTypes

I have a situation in my Redux application where I currently have 3 separate reducers that handle the fetching of data from an api. An example of one of my reducers would be:

    const INITIAL_STATE = {
      data: [],
      loading: false,
      error: &#39;&#39;
    };

    export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
        case GET_ALL_ORDERS_START:
          return {
            ...state,
            loading: true
          };
        case GET_ALL_ORDERS_SUCCESS:
          return {
            ...state,
            allOrders: action.payload,
            loading: false
          };
        case GET_ALL_ORDERS_FAIL:
          return {
            ...state,
            loading: false,
            error: action.payload
          };
        default:
          return state;
      }
    };

Note the loading and error states, these are identical in each current reducer and will be for any subsequent reducers I write that involve fetching data from the api.

I would like to add a further reducer that is used only for the loading and error pieces of state. The other 3 would store the data.

This would give me:

Data reducers x 3

    const INITIAL_STATE = {
      data: []
      // any other state in the future
    };

    export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
        case GET_ALL_ORDERS_SUCCESS:
          return {
            ...state,
            allOrders: action.payload
          };
        default:
          return state;
      }
    };

Loading / Error reducer (handles loading / error for entire app)

    const INITIAL_STATE = {
      loading: false,
      error: &#39;&#39;
    };

    export default (state = INITIAL_STATE, action) =&gt; {
      switch (action.type) {
        case GET_ALL_ORDERS_START:
          return {
            ...state,
            loading: true
          };
        case GET_ALL_ORDERS_SUCCESS:
          return {
            ...state,
            loading: false
          };
        case GET_ALL_ORDERS_FAIL:
          return {
            ...state,
            loading: false,
            error: action.payload
          };
        default:
          return state;
      }
    };

As you can see this means the GET_ALL_ORDER_SUCCESS action type will be used in 2 separate reducers. My question is, is this ok? or does it go against convention?

Many thanks in advance.

Redux can I use one action type in separate reducers?

Whilst learning `Redux` I&#39;ve came across `Reducers`. The documentation states:

&gt; The reducer is a pure function that takes the previous state and an action, and returns the next state. (previousState, action) =&gt; newState. It&#39;s called a reducer because it&#39;s the type of function you would pass to Array.prototype.reduce(reducer, ?initialValue) .

MDN describes the `reduce` method as:

&gt; The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.

I&#39;m still confused on why the Redux definition of a reducer as it&#39;s making no sense. Secondly the MDN description doesn&#39;t seem correct either. The `reduce` method isn&#39;t always used to reduce to a single value. It can be used in place of `map` and `filter` and is actually faster when used in place of chaining.

Is the MDN description incorrect?

Jumping back to the Redux definition of a reducer, it states:

&gt;  It&#39;s called a reducer because it&#39;s the type of function you would pass to Array.prototype.reduce(reducer, ?initialValue)

I&#39;m under the impression that a reducer in Redux is responsible for modifying state. An example reducer:

    const count = function(state, action) {
        if(action.type == &#39;INCREMENT&#39;) {
            return state + 1;
        } else if(action.type == &#39;DECREMENT&#39;) {
            return state - 1;
        } else {
            return state;
        }
    }

... I don&#39;t see how this is a function that would be passed to `reduce`. How is that data being reduced to a single value? If this is a function you would pass to `reduce` then `state` would be the callback and `action` would be the initial value. 

Thanks for any clear explanations. It&#39;s difficult to conceptualize.


Why is a Redux reducer called a reducer?

I have the following module I&#39;m trying to test in Jest:


    // myModule.js

    export function otherFn() {
      console.log(&#39;do something&#39;);
    }
    
    export function testFn() {
      otherFn();
    
      // do other things
    }
As shown above, it exports some named functions and importantly `testFn` uses `otherFn`.

In Jest when I&#39;m writing my unit test for `testFn`, I want to mock the `otherFn` function because I don&#39;t want errors in `otherFn` to affect my unit test for `testFn`. My issue is that I&#39;m not sure the best way to do that:

    // myModule.test.js
    jest.unmock(&#39;myModule&#39;);

    import { testFn, otherFn } from &#39;myModule&#39;;
    
    describe(&#39;test category&#39;, () =&gt; {
      it(&#39;tests something about testFn&#39;, () =&gt; {
        // I want to mock &quot;otherFn&quot; here but can&#39;t reassign
        // a.k.a. can&#39;t do otherFn = jest.fn()
      });
    });

Any help/insight is appreciated.

How to mock imported named function in Jest when module is unmocked

This is my first front-end testing experience. In this project, I&#39;m using Jest snapshot testing and got an error `TypeError: window.matchMedia is not a function` inside my component.

I go through Jest documentation, I found the &quot;Manual mocks&quot; section, but I have not any idea about how to do that yet.



Jest test fails : TypeError: window.matchMedia is not a function

Jest states in docs:
&quot;Jest virtualizes JavaScript environments and runs tests in parallel across worker processes.&quot;

But what about multiple tests inside one file, do they run in parallel or this statement applies just to the test files? Can I assume that tests in one file run in order of appearance and in serial?

Are tests inside one file run in parallel in Jest?

I have the following function in a React component:

    onUploadStart(file, xhr, formData) {
      formData.append(&#39;filename&#39;, file.name);
      formData.append(&#39;mimeType&#39;, file.type);
    }

This is my test that at least gets the spy to be called: 

    const formData = { append: jest.fn() };
    const file = { name: &#39;someFileName&#39;, type: &#39;someMimeType&#39; };
    eventHandlers.onUploadStart(file, null, formData);

    expect(formData.append).toHaveBeenCalledWith(
      [&#39;mimeType&#39;, &#39;someMimeType&#39;],
      [&#39;fileName&#39;, &#39;someFileName&#39;]
    );

However, the assertion is not working:

    Expected mock function to have been called with:
     [[&quot;mimeType&quot;, &quot;someMimeType&quot;], [&quot;fileName&quot;, &quot;someFileName&quot;]]
    But it was called with:
      [&quot;mimeType&quot;, &quot;someMimeType&quot;], [&quot;filename&quot;, &quot;someFileName&quot;]

What is the right way to use `toHaveBeenCalledWith`?

How to check multiple arguments on multiple calls for jest spies?

I get that `.toEqual()` checks equality of all fields for plain objects:

```typescript
expect(
	{&quot;key1&quot;:&quot;pink  wool&quot;,&quot;key2&quot;:&quot;diorite&quot;}
).toEqual(
	{&quot;key2&quot;:&quot;diorite&quot;,&quot;key1&quot;:&quot;pink wool&quot;}
);
```

So this passes.

But the same is not true for arrays:

```typescript
expect([&quot;pink wool&quot;, &quot;diorite&quot;]).toEqual([&quot;diorite&quot;, &quot;pink wool&quot;]);
```

There does not seem to be a matcher function that does this in the jest docs, i.e. that tests for the equality of two arrays irrespective of their elements positions. Do I have to test each element in one array against all the elements in the other and vice versa? Or is there another way?


Is there an Array equality match function that ignores element position in jest.js?

I have a project who I didn&#39;t touch for 2 weeks. I take it back and now when I try to run `npm start` I got this error.

    &gt; react-scripts start
    
    sh: react-scripts: command not found
    
    npm ERR! Darwin 16.0.0
    npm ERR! argv &quot;/usr/local/bin/node&quot; &quot;/usr/local/bin/npm&quot; &quot;start&quot;
    npm ERR! node v6.7.0
    npm ERR! npm  v3.10.3
    npm ERR! file sh
    npm ERR! code ELIFECYCLE
    npm ERR! errno ENOENT
    npm ERR! syscall spawn
    npm ERR! UpScore@0.6.0 start: `react-scripts start`
    npm ERR! spawn ENOENT
    npm ERR!
    npm ERR! Failed at the UpScore@0.6.0 start script &#39;react-scripts start&#39;.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the UpScore package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     react-scripts start
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR!     npm bugs UpScore
    npm ERR! Or if that isn&#39;t available, you can get their info via:
    npm ERR!     npm owner ls UpScore
    npm ERR! There is likely additional logging output above.

- node 6.7.0
- npm 3.10.3
- mac sierra 10.12

package.json

    {
      &quot;name&quot;: &quot;UpScore&quot;,
      &quot;version&quot;: &quot;0.6.0&quot;,
      &quot;private&quot;: true,
      &quot;devDependencies&quot;: {
        &quot;react-addons-test-utils&quot;: &quot;^15.3.1&quot;,
        &quot;react-scripts&quot;: &quot;0.4.1&quot;,
        &quot;react-test-renderer&quot;: &quot;^15.3.1&quot;,
        &quot;redux-logger&quot;: &quot;^2.6.1&quot;
      },
      &quot;dependencies&quot;: {
        &quot;@yoshokatana/medium-button&quot;: &quot;^1.1.0&quot;,
        &quot;axios&quot;: &quot;^0.14.0&quot;,
        &quot;bcrypt&quot;: &quot;^0.8.7&quot;,
        &quot;bcrypt-nodejs&quot;: &quot;0.0.3&quot;,
        &quot;bcryptjs&quot;: &quot;^2.3.0&quot;,
        &quot;body-parser&quot;: &quot;^1.15.2&quot;,
        &quot;connect-flash&quot;: &quot;^0.1.1&quot;,
        &quot;cookie-parser&quot;: &quot;^1.4.3&quot;,
        &quot;draft-js&quot;: &quot;^0.8.1&quot;,
        &quot;draft-js-editor&quot;: &quot;^1.7.2&quot;,
        &quot;draft-js-export-html&quot;: &quot;^0.4.0&quot;,
        &quot;ejs&quot;: &quot;^2.5.2&quot;,
        &quot;email-verification&quot;: &quot;^0.4.5&quot;,
        &quot;express&quot;: &quot;^4.14.0&quot;,
        &quot;express-session&quot;: &quot;^1.14.1&quot;,
        &quot;flexboxgrid&quot;: &quot;^6.3.1&quot;,
        &quot;highlight.js&quot;: &quot;^9.6.0&quot;,
        &quot;immutable&quot;: &quot;^3.8.1&quot;,
        &quot;katex&quot;: &quot;^0.6.0&quot;,
        &quot;lodash&quot;: &quot;^4.15.0&quot;,
        &quot;markdown-it-mathjax&quot;: &quot;^1.0.3&quot;,
        &quot;material-ui&quot;: &quot;^0.15.4&quot;,
        &quot;medium-editor&quot;: &quot;^5.22.0&quot;,
        &quot;minutes-seconds-milliseconds&quot;: &quot;^1.0.3&quot;,
        &quot;moment&quot;: &quot;^2.15.0&quot;,
        &quot;moment-duration-format&quot;: &quot;^1.3.0&quot;,
        &quot;mongod&quot;: &quot;^1.3.0&quot;,
        &quot;mongodb&quot;: &quot;^2.2.9&quot;,
        &quot;mongoose&quot;: &quot;^4.6.0&quot;,
        &quot;monk&quot;: &quot;^3.1.2&quot;,
        &quot;morgan&quot;: &quot;^1.7.0&quot;,
        &quot;normalize.css&quot;: &quot;^3.0.3&quot;,
        &quot;passport&quot;: &quot;^0.3.2&quot;,
        &quot;passport-local&quot;: &quot;^1.0.0&quot;,
        &quot;react&quot;: &quot;^15.3.1&quot;,
        &quot;react-dom&quot;: &quot;^15.3.1&quot;,
        &quot;react-markdown&quot;: &quot;^2.4.2&quot;,
        &quot;react-medium-editor&quot;: &quot;^1.8.1&quot;,
        &quot;react-redux&quot;: &quot;^4.4.5&quot;,
        &quot;react-redux-form&quot;: &quot;^0.14.5&quot;,
        &quot;react-rich-markdown&quot;: &quot;^1.0.1&quot;,
        &quot;react-router&quot;: &quot;^2.7.0&quot;,
        &quot;react-router-redux&quot;: &quot;^4.0.5&quot;,
        &quot;react-tap-event-plugin&quot;: &quot;^1.0.0&quot;,
        &quot;react-tinymce&quot;: &quot;^0.5.1&quot;,
        &quot;redux&quot;: &quot;^3.6.0&quot;,
        &quot;redux-form&quot;: &quot;^6.0.5&quot;,
        &quot;redux-form-material-ui&quot;: &quot;^4.0.1&quot;,
        &quot;redux-promise-middleware&quot;: &quot;^4.0.0&quot;,
        &quot;redux-thunk&quot;: &quot;^2.1.0&quot;,
        &quot;reselect&quot;: &quot;^2.5.3&quot;,
        &quot;screenfull&quot;: &quot;^3.0.2&quot;
      },
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;react-scripts start&quot;,
        &quot;start:prod&quot;: &quot;pushstate-server build&quot;,
        &quot;build&quot;: &quot;react-scripts build&quot;,
        &quot;test&quot;: &quot;react-scripts test --env=jsdom&quot;,
        &quot;eject&quot;: &quot;react-scripts eject&quot;,
        &quot;server&quot;: &quot;cd client/api &amp;&amp; pm2 start server.js --watch&quot;,
        &quot;proxy&quot;: &quot;http://128.199.139.144:3000&quot;
      },
      &quot;eslintConfig&quot;: {
        &quot;extends&quot;: &quot;./node_modules/react-scripts/config/eslint.js&quot;
      }
    }


I try to clone my repos too and get the same error. If someone can give me some way to find what happen. Thank you


npm start error with create-react-app

My project is based on [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap). `npm start` or `yarn start` by default will run the application on **port 3000** and there is no option of specifying a port in the package.json. 

How can I specify a port of my choice in this case? I want to run two of this project simultaneously (for testing), one in port `3005` and other is `3006`

How to specify a port to run a create-react-app based project?

Facebook provides a `create-react-app` [command][1] to build react apps. When we run `npm run build`, we see output in `/build` folder. 

&gt; npm run build
&gt; 
&gt; Builds the app for production to the build folder. It correctly
&gt; bundles React in production mode and optimizes the build for the best
&gt; performance.
&gt; 
&gt; The build is minified and the filenames include the hashes. Your app
&gt; is ready to be deployed!

How can we use custom folder instead of `/build` for the output? Thanks.


  [1]: https://github.com/facebookincubator/create-react-app

Use custom build output folder when using create-react-app

I&#39;m using [create-react-app][1] and prefer not to `eject`.

It&#39;s not clear where fonts imported via @font-face and loaded locally should go. 

Namely, I&#39;m loading

    @font-face {
      font-family: &#39;Myriad Pro Regular&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Regular&#39;), url(&#39;MYRIADPRO-REGULAR.woff&#39;) format(&#39;woff&#39;);
    }

Any suggestions?


-- EDIT

Including the gist to which Dan referring in his answer

    ➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
    total 1168
    -rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
    -rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
    -rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
    -rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
    -rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
    -rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
    -rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
    -rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
    -rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
    ➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
    .GameModule {
      padding: 15px;
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Regular&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Regular&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Condensed&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Condensed&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Semibold Italic&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Semibold Italic&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Semibold&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Semibold&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Condensed Italic&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Condensed Italic&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Bold Italic&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Bold Italic&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Bold Condensed Italic&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Bold Condensed Italic&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Bold Condensed&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Bold Condensed&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff&#39;) format(&#39;woff&#39;);
    }
    
    @font-face {
      font-family: &#39;Myriad Pro Bold&#39;;
      font-style: normal;
      font-weight: normal;
      src: local(&#39;Myriad Pro Bold&#39;), url(&#39;%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff&#39;) format(&#39;woff&#39;);
    }


  [1]: https://github.com/facebook/create-react-app

How to add fonts to create-react-app based projects?

I&#39;m starting to play with the Create React App, but I can&#39;t understand how the `index.js` is loaded inside `index.html`. This is the html code:

```html
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot;&gt;
    &lt;!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike &quot;/favicon.ico&quot; or &quot;favicon.ico&quot;, &quot;%PUBLIC_URL%/favicon.ico&quot; will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    --&gt;
    &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the &lt;body&gt; tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    --&gt;
  &lt;/body&gt;
&lt;/html&gt;
```

But I can&#39;t see anywhere the import of the `index.js`. Where is the connection? What am I missing?

Content Type	Original Author	Original Content on Stackoverflow
Question	AlexStack	View Question on Stackoverflow
Solution 1 - Reactjs	WayneC	View Answer on Stackoverflow
Solution 2 - Reactjs	thisismydesign	View Answer on Stackoverflow
Solution 3 - Reactjs	msahin	View Answer on Stackoverflow

Running CRA Jest in non-interactive mode

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

docker: driver failed programming external connectivity on endpoint webserver

Why doesn't the compiler report a missing semicolon?

Attributions